/**
 * reset css
 */
html,
body {
  font: 16px / 1.6 "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
  background-color: #EDE9E8;
  color: #333;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
iframe,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
button,
input,
textarea,
th,
td,
fieldset {
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

 code {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  word-wrap: break-word !important;
}

.page-enter-active,
.page-leave-active {
  transition: opacity .5s;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

/**
 * base css
 */

a {
  color: #337AB7;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  &:hover {
    text-decoration: none;
    outline: none;
  }
  &:focus,
  &:hover,
  &:active {
    outline: none;
  }
}

input {
  height: 35px;
  box-sizing: border-box;
  text-indent: 1em;
  border: 1px solid #e4e4e4;
  display: inline-block;
  &:focus {
    outline: none;
  }
}

.container {
  padding: 15px;
}


.black-button {
  background-color: #33363b;
  color: #fff;
  &:hover {
    background-color: #3d4045;
  }
}

/**
 * front css
 */

.login {
  & .login-username,
  & .login-password,
  & .login-button {
    margin: 0 auto 15px;
    display: block;
    width: 200px;
  }
  & .login-button {
    background-color: #33363b;
    color: #fff;
    &:hover {
      background-color: #3d4045;
    }
  }
}

.index {
  & .page {
    padding: 15px;
    padding-top: 0;
    & a {
      width: 50%;
    }
    & .page-next {
      text-align: right;
    }

    & .disabled {
      cursor: not-allowed;
      color: #999;
    }
  }
}

.tags {
  & .tags-list {
    padding: 15px;
  }
  & .tag {
    border: 1px solid #3d4045;
    display: inline-block;
    border-radius: 4px;
    margin-right: 15px;
    margin-bottom: 15px;
    & a {
      padding: 8px 15px;
      color: #333;
      &:hover {
        color: #666;
      }
    }
  }
}

.detail {
  padding-top: 30px; 
  padding-bottom: 30px;
  & .detail-title {
    font-size: 17px;
    font-weight: bold;
  }
  & .detail-meta {
    font-size: 13px;
    color: #666;
    border-top: 1px dashed #e4e4e4;
    padding-top: 8px;
    margin: 8px 0 15px;
    & .meta {
      display: inline-block;
      margin-right: 15px;
    }
    & .meta-tags span {
      margin-right: 8px;
    }
  }
  & .detail-admin {
    display: flex;
    border-top: 1px dashed #e4e4e4;
    padding-top: 8px;
    justify-content: flex-end;
    margin-top: 15px;
    & .admin-del {
      margin-right: 15px;
    }
  }
}

.archives {
  padding-top: 0;
  & .archive {
    & .archive-date {
      font-size: 17px;
      font-weight: bold;
      margin: 20px 0 10px 0;
    }
  }

  & li {
    list-style-position:inside;
  }
}

.search {
  text-align: center;
  padding-top: 50px;
  & .search-title {
    padding-bottom: 30px;
  }
  & .search-form {
    padding-bottom: 25px;
    & input {
      vertical-align: top;
      width: 300px;
    }
  }
}

/**
 * admin css
 */

.admin-private {
  & .list-item {
    display: flex;
    padding: 8px 0;
    border-top: 1px solid #e4e4e4;
    & .item-date {
      width: 200px;
      text-align: left;
    }
    & .item-edit,
    & .item-del {
      width: 50px;
      text-align: right;
    }
    & .item-title {
      flex: 1;
    }
  }
  & .list-item:nth-child(1){
    border-top: none;
    padding-top: 0;
  }
}

.admin-tags {
  & .tags-input {
    margin-bottom: 8px;
    text-align: center;
    & input {
      vertical-align: top;
    }
    & .input-button {
      background-color: #33363b;
      &:hover {
        background-color: #33363b;
      }
    }
  }
  & .list-item {
    display: flex;
    padding: 8px 0;
    border-top: 1px solid #e4e4e4;
    & .item-date {
      width: 200px;
      text-align: left;
    }
    & .item-edit,
    & .item-del {
      width: 50px;
      text-align: right;
    }
    & .item-title {
      flex: 1;
    }
  }
  & .list-item:nth-child(1){
    border-top: none;
    padding-top: 0;
  }
}

.admin-update {
  & h4,
  & p {
    text-align: center;
    margin-bottom: 10px;
  }
  & input[type="text"],
  & input[type="password"],
  & button {
    margin: 0 auto 15px;
    display: block;
    width: 200px;
  }
  & button {
    background-color: #33363b;
    color: #fff;
    &:hover {
      background-color: #3d4045;
    }
  }
}

.admin-publish {
  & .publish-title input[type="text"] {
    width: 100%;
    margin-bottom: 15px;
  }

  & .publish-handle {
    margin-top: 40px;
    display: flex;
    position: relative;
    & input {
      flex: 1;
    }
    & .handle-button {
      width: 400px;
      text-align: right;
      & .button-private {
        margin-right: 15px;
      }
    }
    & .handle-tag {
      position: absolute;
      overflow: hidden;
      top: -90%;
      & li {
        position: relative;
        display: inline-block;
        font-size: 13px;
        background-color: #e4e4e4;
        margin-right: 15px;
        padding-left: 8px;
        & span {
          cursor: pointer;
          padding-right: 8px;
        }
      }
    }
  }
  & .publish-tags {
    display: flex;
    margin-top: 15px;
    & a {
      margin-right: 15px;
    }
  }
}

/**
 * media screen
 */

@media (max-width: 600px) {
  nav .nav-search {
    display: none;
  }
  .layout {
    margin-top: 0 !important;
  }
  .layout .footer .footer-copy {
    padding-top: 5px;
    display: block;
    text-align: center;
  }
}



.wrap { 
  width:1190px; 
  margin-right:auto; 
  margin-left:auto;
}
body { 
  font-size:14px;
}
html,body { 
  min-height:100%;
  background-color:#ffffff;
}
html { 
  position:relative;
}
i,em {
  font-style:normal;
}
ul,li { list-style-type:none; }
a { color:#666; }
a:hover { color:#409EFF; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
  font-family:inherit;
  font-weight:normal;
  line-height:inherit;
  font-family:"Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:inherit\9;
}
.fix { *zoom:1; *clear:both;}
.fix:before,.fix:after { display:table; clear:both; content:'';}

.row{width:102%;transition:.2s width ease;*zoom:1;}.row:before,.row:after{display:table;clear:both;content:''}.row>[class*="span-"]{min-height:5px;float:left;margin-right:2%;*margin-right:1.89%}.row>.span-1{width:6.33333333%}.row>.span-2{width:14.66666667%}.row>.span-3{width:23%}.row>.span-4{width:31.33333333%}.row>.span-5{width:39.66666667%}.row>.span-6{width:48%}.row>.span-7{width:56.33333333%}.row>.span-8{width:64.66666667%}.row>.span-9{width:73%}.row>.span-10{width:81.33333333%}.row>.span-11{width:89.66666667%}.row>.span-12{width:98%}.row>.span-13{width:106.33333333%}.row>.span-14{width:114.66666667%}.row>.span-15{width:123%}.row>.span-16{width:131.33333333%}.row>.span-17{width:139.66666667%}.row>.span-18{width:148%}.row>.span-19{width:156.33333333%}.row>.span-20{width:164.66666667%}.row>.span-21{width:173%}.row>.span-22{width:181.33333333%}.row>.span-23{width:189.66666667%}.row>.span-24{width:198%}.full-row{width:100%;transition:.2s width ease;*zoom:1}.full-row:before,.full-row:after{display:table;clear:both;content:''}.full-row>[class*='span']{float:left}.full-row>.span-1{width:8.33333333%;*width:8.22333333%}.full-row>.span-2{width:16.66666667%;*width:16.55666667%}.full-row>.span-3{width:25%;*width:24.89%}.full-row>.span-4{width:33.33333333%;*width:33.22333333%}.full-row>.span-5{width:41.66666667%;*width:41.55666667%}.full-row>.span-6{width:50%;*width:49.89%}.full-row>.span-7{width:58.33333333%;*width:58.22333333%}.full-row>.span-8{width:66.66666667%;*width:66.55666667%}.full-row>.span-9{width:75%;*width:74.89%}.full-row>.span-10{width:83.33333333%;*width:83.22333333%}.full-row>.span-11{width:91.66666667%;*width:91.55666667%}.full-row>.span-12{width:100%;*width:99.89%}.full-row>.span-13{width:108.33333333%;*width:108.22333333%}.full-row>.span-14{width:116.66666667%;*width:116.55666667%}.full-row>.span-15{width:125%;*width:124.89%}.full-row>.span-16{width:133.33333333%;*width:133.22333333%}.full-row>.span-17{width:141.66666667%;*width:141.55666667%}.full-row>.span-18{width:150%;*width:149.89%}.full-row>.span-19{width:158.33333333%;*width:158.22333333%}.full-row>.span-20{width:166.66666667%;*width:166.55666667%}.full-row>.span-21{width:175%;*width:174.89%}.full-row>.span-22{width:183.33333333%;*width:183.22333333%}.full-row>.span-23{width:191.66666667%;*width:191.55666667%}.full-row>.span-24{width:200%;*width:199.89%}.row>.pull-right,.full-row>.pull-right{float:right}.row>.center{position:relative;left:-1%;display:block;float:none;clear:both;margin-right:auto;margin-left:auto}.full-row>.center{display:block;float:none;clear:both;margin-right:auto;margin-left:auto}.pull-left-1{position:relative;left:-8.33333333%}.pull-left-2{position:relative;left:-16.66666667%}.pull-left-3{position:relative;left:-25%}.pull-left-4{position:relative;left:-33.33333333%}.pull-left-5{position:relative;left:-41.66666667%}.pull-left-6{position:relative;left:-50%}.pull-left-7{position:relative;left:-58.33333333%}.pull-left-8{position:relative;left:-66.66666667%}.pull-left-9{position:relative;left:-75%}.pull-left-10{position:relative;left:-83.33333333%}.pull-left-11{position:relative;left:-91.66666667%}.pull-left-12{position:relative;left:-100%}.pull-left-13{position:relative;left:-108.33333333%}.pull-left-14{position:relative;left:-116.66666667%}.pull-left-15{position:relative;left:-125%}.pull-left-16{position:relative;left:-133.33333333%}.pull-left-17{position:relative;left:-141.66666667%}.pull-left-18{position:relative;left:-150%}.pull-left-19{position:relative;left:-158.33333333%}.pull-left-20{position:relative;left:-166.66666667%}.pull-left-21{position:relative;left:-175%}.pull-left-22{position:relative;left:-183.33333333%}.pull-left-23{position:relative;left:-191.66666667%}.pull-left-24{position:relative;left:-200%}.pull-right-1{position:relative;left:8.33333333%}.pull-right-2{position:relative;left:16.66666667%}.pull-right-3{position:relative;left:25%}.pull-right-4{position:relative;left:33.33333333%}.pull-right-5{position:relative;left:41.66666667%}.pull-right-6{position:relative;left:50%}.pull-right-7{position:relative;left:58.33333333%}.pull-right-8{position:relative;left:66.66666667%}.pull-right-9{position:relative;left:75%}.pull-right-10{position:relative;left:83.33333333%}.pull-right-11{position:relative;left:91.66666667%}.pull-right-12{position:relative;left:100%}.pull-right-13{position:relative;left:108.33333333%}.pull-right-14{position:relative;left:116.66666667%}.pull-right-15{position:relative;left:125%}.pull-right-16{position:relative;left:133.33333333%}.pull-right-17{position:relative;left:141.66666667%}.pull-right-18{position:relative;left:150%}.pull-right-19{position:relative;left:158.33333333%}.pull-right-20{position:relative;left:166.66666667%}.pull-right-21{position:relative;left:175%}.pull-right-22{position:relative;left:183.33333333%}.pull-right-23{position:relative;left:191.66666667%}.pull-right-24{position:relative;left:200%}@media only screen and (max-device-width:1024px){.row>.midd-1{width:6.33333333%}.row>.midd-2{width:14.66666667%}.row>.midd-3{width:23%}.row>.midd-4{width:31.33333333%}.row>.midd-5{width:39.66666667%}.row>.midd-6{width:48%}.row>.midd-7{width:56.33333333%}.row>.midd-8{width:64.66666667%}.row>.midd-9{width:73%}.row>.midd-10{width:81.33333333%}.row>.midd-11{width:89.66666667%}.row>.midd-12{width:98%}.row>.midd-13{width:106.33333333%}.row>.midd-14{width:114.66666667%}.row>.midd-15{width:123%}.row>.midd-16{width:131.33333333%}.row>.midd-17{width:139.66666667%}.row>.midd-18{width:148%}.row>.midd-19{width:156.33333333%}.row>.midd-20{width:164.66666667%}.row>.midd-21{width:173%}.row>.midd-22{width:181.33333333%}.row>.midd-23{width:189.66666667%}.row>.midd-24{width:198%}.midd-hide{display:none}.midd-center{position:relative;left:-1%;display:block;float:none;clear:both;margin-right:auto;margin-left:auto}.full-row>.midd-1{width:8.33333333%}.full-row>.midd-2{width:16.66666667%}.full-row>.midd-3{width:25%}.full-row>.midd-4{width:33.33333333%}.full-row>.midd-5{width:41.66666667%}.full-row>.midd-6{width:50%}.full-row>.midd-7{width:58.33333333%}.full-row>.midd-8{width:66.66666667%}.full-row>.midd-9{width:75%}.full-row>.midd-10{width:83.33333333%}.full-row>.midd-11{width:91.66666667%}.full-row>.midd-12{width:100%}.full-row>.midd-13{width:108.33333333%}.full-row>.midd-14{width:116.66666667%}.full-row>.midd-15{width:125%}.full-row>.midd-16{width:133.33333333%}.full-row>.midd-17{width:141.66666667%}.full-row>.midd-18{width:150%}.full-row>.midd-19{width:158.33333333%}.full-row>.midd-20{width:166.66666667%}.full-row>.midd-21{width:175%}.full-row>.midd-22{width:183.33333333%}.full-row>.midd-23{width:191.66666667%}.full-row>.midd-24{width:200%}}@media only screen and (max-device-width:760px){.row>.smal-1{width:6.33333333%}.row>.smal-2{width:14.66666667%}.row>.smal-3{width:23%}.row>.smal-4{width:31.33333333%}.row>.smal-5{width:39.66666667%}.row>.smal-6{width:48%}.row>.smal-7{width:56.33333333%}.row>.smal-8{width:64.66666667%}.row>.smal-9{width:73%}.row>.smal-10{width:81.33333333%}.row>.smal-11{width:89.66666667%}.row>.smal-12{width:98%}.row>.smal-13{width:106.33333333%}.row>.smal-14{width:114.66666667%}.row>.smal-15{width:123%}.row>.smal-16{width:131.33333333%}.row>.smal-17{width:139.66666667%}.row>.smal-18{width:148%}.row>.smal-19{width:156.33333333%}.row>.smal-20{width:164.66666667%}.row>.smal-21{width:173%}.row>.smal-22{width:181.33333333%}.row>.smal-23{width:189.66666667%}.row>.smal-24{width:198%}.smal-hide{display:none}.smal-show{display:block}.smal-center{position:relative;left:-1%;display:block;float:none;clear:both;margin-right:auto;margin-left:auto}[class*='pull-left-'],[class*='pull-right-']{right:auto;left:auto}.full-row>.smal-1{width:8.33333333%}.full-row>.smal-2{width:16.66666667%}.full-row>.smal-3{width:25%}.full-row>.smal-4{width:33.33333333%}.full-row>.smal-5{width:41.66666667%}.full-row>.smal-6{width:50%}.full-row>.smal-7{width:58.33333333%}.full-row>.smal-8{width:66.66666667%}.full-row>.smal-9{width:75%}.full-row>.smal-10{width:83.33333333%}.full-row>.smal-11{width:91.66666667%}.full-row>.smal-12{width:100%}.full-row>.smal-13{width:108.33333333%}.full-row>.smal-14{width:116.66666667%}.full-row>.smal-15{width:125%}.full-row>.smal-16{width:133.33333333%}.full-row>.smal-17{width:141.66666667%}.full-row>.smal-18{width:150%}.full-row>.smal-19{width:158.33333333%}.full-row>.smal-20{width:166.66666667%}.full-row>.smal-21{width:175%}.full-row>.smal-22{width:183.33333333%}.full-row>.smal-23{width:191.66666667%}.full-row>.smal-24{width:200%}}

*[class*="rect-"] {
  display: block;
  height: 0;
  overflow: hidden;
  position: relative;
  & ._full {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
.rect-75{
  padding-bottom:75%;
}

.sooc_box {
  & .el-dialog__body {
    padding-top:10px;
    padding-bottom:20px;
  }
}